<template>
  <div class="container">
    <div class="swiper">
      <div class="swiperItem">
        <swiper :options="swiper">
          <swiperSlide v-for="(temp,index) in banner" :key="index">
            <el-image style="width:1200px;height:360px" fit="cover" :src="temp.img"></el-image>
          </swiperSlide>
        </swiper>
      </div>
    </div>
    <div class="content">
      <menus></menus>
      <random></random>
    </div>
  </div>

</template>

<script>
// api
import { getBanner } from "@/api/miva";
// item
import menus from "@/components/menu";
import random from "@/components/random";
import "swiper/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  components: {
    menus,
    random,
    swiperSlide,
    swiper
  },
  data() {
    return {
      show: false,
      banner: [],
      swiper: {
        autoplay: true
      }
    };
  },
  created() {
    this.$store.commit("SETTING_HEADER_ACTIVE", 0);
  },
  async mounted() {
    await this.getBanner();
  },
  methods: {
    async getBanner() {
      const res = await getBanner();
      console.log(res);
      this.banner = res.data;
    }
  }
};
</script>

<style lang="less">
.container {
  background: #fff;
  .swiper {
    width: 100%;
    background: #f2f2f2;
    // height: 61vh;
    padding: 22px 0;
    .swiperItem {
      background: #fff;
      width: 1200px;
      height: 360px;
      margin: 0 auto;
    }
  }
  .content {
    max-width: 1200px;
    margin: 0 auto;
  }
}
</style>